<template>
   <div class="liuyanban" style="">
      <div class="Board">
        <div>留言板</div>
        <el-input v-model="name" placeholder="姓名：" class="input"></el-input>
        <el-input v-model="phone" type="number"  placeholder="电话：" class="input"></el-input>
        <el-input
          v-model="address"
          placeholder="地址："
          class="input"
        ></el-input>
        <el-input
          type="textarea"
          :rows="3"
          resize="none"
          placeholder="资讯内容："
          v-model="textarea"
          class="input"
        ></el-input>
        <el-button class="more" type="warning" @click="Submit">提交</el-button>
      </div>
      <div class="map">
        <img src="../assets/ditu.png" alt="" class="ditu" />
        <div class="dizhi">
          <div>地址：湖北省武汉市光谷现代世贸中心A栋203室</div>
          <div style="padding-top:2%">电话：17607111277</div>
        </div>
        
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name: '',
            phone: '',
            address: '',
            textarea: ''
        }
    },
    methods: {
      async Submit(){
        const { data: res } = await this.$axios.post("index/addMessage",{
          name: this.name,
          phone: this.phone,
          address: this.address,
          content: this.textarea
        })
        console.log(res)
        if (res.code !=1) return this.$message.error(res.msg);
        this.$message.success('您已提交成功')
        this.name =''
        this.phone = ''
        this.address = ''
        this.textarea = ''
      }
      
    }

}
</script>

<style lang="scss">
.liuyanban {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 2%;
  .Board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #efefef;
    padding-right: 2%;
    .input {
      width: 450px;
      margin-top: 20px;
    }
    .more {
     margin-top: 20px;
    }
  }
  .map {
    padding-left: 2%;
    padding-top: 2%;
    .ditu {
      width: 400px;
      height: 260px;
    }
    .dizhi {
      padding-top: 3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  }
}
input[type=number] {  
    -moz-appearance:textfield;  
}  
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    // margin: 0;  
}

</style>